<template>
  <div>
    <div class="echarts_cover">
      <!-- 第一张关于学历占比的可视化图表 -->
      <div class="center_cover">
        <div id="collegeEcharts" v-show="source.length > 0"></div>
      </div>
      <el-button class="btn1" @click="showSelect" v-if="source.length > 0"
        >进入筛选</el-button
      >
    </div>
    <el-dialog title="筛选条件" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form">
        <el-form-item label="请选择性别" :label-width="formLabelWidth">
          <el-select v-model="form.work_sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择学历" :label-width="formLabelWidth">
          <el-select v-model="form.work_xueli" placeholder="请选择学历">
            <el-option label="本科" value="本科"></el-option>
            <el-option label="研究生" value="研究生"></el-option>
            <el-option label="博士" value="博士"></el-option>
          </el-select>
        </el-form-item>

            <el-form-item label="就业升学" :label-width="formLabelWidth">
          <el-select v-model="form.work_jiuye" placeholder="请选择就业升学情况">
            <el-option label="待就业" value="待就业"></el-option>
            <el-option label="就业" value="就业"></el-option>
            <el-option label="升学" value="升学"></el-option>
            <el-option label="灵活就业" value="灵活就业"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm()">清 空</el-button>
        <el-button type="primary" @click="handleChange()">筛 选</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllCollegeData } from "@/api/data";
export default {
  data() {
    return {
      formLabelWidth: '120px',
      source: [],
      dialogFormVisible: false,
      form: {
        work_sex: "",
        work_xueli: "",
      },
    };
  },
  mounted() {
    // 获取全部的学院信息
    this.handleChange();
  },
  methods: {
    // 进入筛选
    showSelect() {
      this.dialogFormVisible = true;
    },
    // 清空条件
    resetForm() {
      this.form = {
        work_biye_time: "",
        work_xueli: "",
        work_jiuye: "",
        work_zhuanye: [],
      };
    },
    // 获取数据
    async handleChange() {
      if (this.dialogFormVisible == true) {
        this.dialogFormVisible = false;
      }

      let data = await getAllCollegeData(this.form);
      this.source = data.data;
      this.xuanran();
    },
    // 渲染第一张图表
    xuanran() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById("collegeEcharts"));

      // 指定图表的配置项和数据
      let option = {
       
        legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false,
        },
        dataset: {
          source: this.source,
        },
        toolbox: {
          show: true,
           orient: "vertical",
          left: "left",
          top: "top",
            feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: this.$store.getters.isShow },
          },
        
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: [
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" },
          },
          {
            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: { focus: "data" },
            label: {
              formatter: "{b}: {@2016} ({d}%)",
            },
            encode: {
              itemName: "product",
              value: "2016",
              tooltip: "2016",
            },
          },
        ],
      };

      myChart.on("updateAxisPointer", function (event) {
        var xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          var dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)",
              },
              encode: {
                value: dimension,
                tooltip: dimension,
              },
            },
          });
        }
      });
      // 使用刚指定的配置项和数据显示图表。

      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_cover {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#collegeEcharts {
  width: 800px;
  height: 600px;
  margin-left: 30px;
}
</style>